<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-30 17:15:36
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-13 14:16:35
 * @FilePath: /tea-garden-web/src/components/component-legend-subject.vue
 * @Description: 专题图例
-->
<template>
  <div class="component-legend-subject" v-if="show">
    <div class="content">
      <div class="title">专题图例</div>
      <section class="status" v-for="(item, index) in data" :key="index">
        <i class="icon" :style="{ 'background-color': item.color }" />
        <span
          class="name"
          :style="{ color: item.color }"
          v-text="item.name"
        ></span>
      </section>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { legend1, legend2, legend3, legend4, legend5, legend6, legend7 } from '@/util/dict.js'
export default {
  computed: {
    ...mapState('base-overview', ['legends']),
    ...mapState('subject-growth', { activeType1: 'activeType' }),
    ...mapState('subject-disease', { activeType2: 'activeType' }),
    ...mapState('subject-weather', { activeType3: 'activeType' }),
    ...mapState('subject-pick', { activeType4: 'activeType' }),
    data () {
      let data = []
      const routerName = this.$route.name
      switch (routerName) {
        case 'subjectGrowth':
          if (this.activeType1 === '0') {
            data = legend1
          } else if (this.activeType1 === '1') {
            data = legend2
          } else {
            data = legend2
          }
          break
        case 'subjectDisease':
          if (this.activeType2 === '0') {
            data = legend5
          } else if (this.activeType2 === '1') {
            data = legend6
          } else {
            data = legend6
          }
          break
        case 'subjectWeather':
          if (this.activeType3 === '1') {
            data = legend7
          } else {
            data = legend7
          }
          break
        case 'subjectPick':
          if (this.activeType4 === '1') {
            data = legend3
          } else {
            data = legend4
          }
          break
      }
      console.log(data)
      return data
    },
    show () {
      const routerName = this.$route.name
      const isSubject = ['subjectGrowth', 'subjectDisease', 'subjectWeather', 'subjectPick'].findIndex((item) => { return item === routerName })
      if (isSubject !== -1 && this.legends.subject) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss">
.component-legend-subject {
  background: rgba(51, 51, 51, 0.8);
  border-radius: 5px 5px 5px 5px;
  padding: 10px 17px;
  .content {
    .title {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
    .status {
      margin-top: 14px;
      line-height: 14px;
      .icon {
        width: 14px;
        height: 14px;
        border-radius: 2.5px;
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
      }
      .name {
        font-size: 14px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
      }
    }
  }
}
</style>
